<template>
  <view class="flex pay-header font24">
    <view class="pay-header-icon">i</view>
    <view class="pay-header-tips">
      请付款至公司指定账户，避免受骗！
    </view>
  </view>
  <view class="pay-container">
    <view class="pay-container-header flex flex-evenly">
      <view class="text-center">
        <view class="tips font28">总应付金额</view>
        <view class="money font44">￥5500.00</view>
      </view>
      <view class="pay-container-line"></view>
      <view class="text-center">
        <view class="tips font28">已付款金额</view>
        <view class="money font44">￥500.00</view>
      </view>
    </view>

    <view class="pay-container-content">
      <view class="header">
        <view class="flex flex-between">
          <view class="font28">这里是合同的名称</view>
          <wd-tag custom-class="space" type="primary" color="#409EFF" bg-color="#D9EDFF">执行中</wd-tag>
        </view>
      </view>
      <view class="flex-between steps">
        <view class="flex flex-column flex-between">
          <view class="pay-header-icon num">1</view>
          <view class="steps-line"></view>
        </view>
        <view class="steps-right">
          <view class="flex flex-between">
            <view class="font28">开工交底（100%）</view>
            <wd-tag custom-class="space" type="primary" :color="colorList[0]" :bg-color="bgColorList[0]">
              {{ tagNameList[0] }}
            </wd-tag>
          </view>
          <view class="flex flex-between font24 steps-money">
            <view>应收：￥3000.00</view>
            <view>实收：￥0.00</view>
          </view>
          
        </view>
      </view>
      <view class="flex-between steps">
        <view class="flex flex-column flex-between">
          <view class="pay-header-icon num">2</view>
          <view class="steps-line"></view>
        </view>
        <view class="steps-right">
          <view class="flex flex-between">
            <view class="font28">开工交底（100%）</view>
            <wd-tag custom-class="space" type="primary" :color="colorList[1]" :bg-color="bgColorList[1]">
              {{ tagNameList[1] }}
            </wd-tag>
          </view>
          <view class="flex flex-between font24 steps-money">
            <view>应收：￥3000.00</view>
            <view>实收：￥0.00</view>
          </view>
          
        </view>
      </view>
      <view class="flex-between steps">
        <view class="flex flex-column flex-between">
          <view class="pay-header-icon num">3</view>
          <view class="steps-line"></view>
        </view>
        <view class="steps-right">
          <view class="flex flex-between">
            <view class="font28">开工交底（100%）</view>
            <wd-tag custom-class="space" type="primary" :color="colorList[1]" :bg-color="bgColorList[1]">
              {{ tagNameList[1] }}
            </wd-tag>
          </view>
          <view class="flex flex-between font24 steps-money">
            <view>应收：￥3000.00</view>
            <view>实收：￥0.00</view>
          </view>
          
        </view>
      </view>
      <view class="flex-between steps">
        <view class="flex flex-column flex-between">
          <view class="pay-header-icon num" :class="{'pay-num-info':activ}">4</view>
          <view class="steps-line" v-if="!activ"></view>
        </view>
        <view class="steps-right">
          <view class="flex flex-between">
            <view class="font28">开工交底（100%）</view>
            <wd-tag custom-class="space" type="primary" :color="colorList[2]" :bg-color="bgColorList[2]">
              {{ tagNameList[2] }}
            </wd-tag>
          </view>
          <view class="flex flex-between font24 steps-money steps-money-info">
            <view>应收：￥3000.00</view>
            <view>实收：￥0.00</view>
          </view>
          
        </view>
      </view>
    </view>
  </view>
  <view class="pay-footer">
    <view class="pay-footer-but" @click="handleGoto">付款</view>
  </view>
</template>

<script setup>
import {ref} from "vue";

const activ = ref(true)
const colorList = ref(["#14C85C", "#409EFF", "#909399"])
const bgColorList = ref(["#E3F9E9", "#D9EDFF", "#f4f4f5"])
const tagNameList = ref(["已完成", "进行中", "未开始"])
const handleGoto = () => {
  uni.navigateTo({url:"/pages/contractManage/payMoney/index"})
}
</script>


<style scoped lang="scss">
.pay {
  &-header {
    padding: 10rpx 34rpx;
    background: #E3F0FE;
    color: #4E5969;
    margin-bottom: 32rpx;

    &-icon {
      width: 28rpx;
      height: 28rpx;
      background: #007DFF;
      border-radius: 50%;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20rpx;
    }

    &-tips {
      margin-left: 18rpx;
    }
  }

  &-container {
    padding: 0 32rpx 160rpx;

    &-header {
      background: #FFFFFF;
      padding: 24rpx 10rpx 36rpx;
      border-radius: 20rpx;

      .tips {
        color: #3D3D3D;
      }

      .money {
        margin-top: 16rpx;
        font-weight: 500;
        color: #3D3D3D;
      }
    }

    &-line {
      width: 8rpx;
      height: 50rpx;
      background: #F1F4F6;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
    }

    &-content {
      margin-top: 28rpx;
      padding: 24rpx 32rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .header {
        color: #3D3D3D;
        padding-bottom: 20rpx;
        margin-bottom: 40rpx;
        border-bottom: 2rpx solid #F1F5F9;
      }

      .num {
        width: 44rpx;
        height: 44rpx;
      }

      .steps {
        display: flex;
        margin-bottom: 16rpx;

        .pay-num-info {
          background: #F3F3F3;
          color: rgba(0, 0, 0, 0.4);
        }

        &-right {
          width: calc(100% - 60rpx);
          color: #606266;
          padding-bottom: 32rpx;
        }

        &-money {
          background: #F1F4F6;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          padding: 20rpx 40rpx;
          margin: 20rpx 0;
          color: #606266;

          &-info {
            background: #F3F3F3;
          }
        }

        .time {
          color: #86909C;
        }

        &-line {
          width: 2rpx;
          height: calc(100% - 60rpx);
          background: #DCDCDC;
        }
      }
    }
  }

  &-footer {
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #FFFFFF;
    box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(78, 89, 105, 0.05);

    &-but {
      width: 686rpx;
      height: 80rpx;
      background: #007DFF;
      color: #FFFFFF;
      text-align: center;
      line-height: 80rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      font-size: 32rpx;
      margin: 24rpx 0 40rpx;
    }
  }
}
</style>